 <template>
   <el-card shadow="always" class="box-card">
      <div class="card-name search-item">
        <div class="name width2">退回订单</div>
        <div class="mr-15">
          <el-button size="medium" type="primary" @click="add">新 增</el-button>
          <el-button size="medium" type="danger">打印</el-button>
          <el-button size="medium" type="danger">导出</el-button>
          <el-button size="medium" type="danger">审核</el-button>
          <el-button size="medium" type="danger">反审核</el-button>
        </div>
      </div>
      <div class="content-con">
        <el-form :model="form" ref="form" size="medium" class="flex-s mt-30" label-width="80px">
          <el-form-item label="日期:">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="keywords">
            <el-input v-model="form.keywords" placeholder="输入单据编号/客户名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="save" @click="search">查 询</el-button>
          </el-form-item>
        </el-form>
        <div class="form-item">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            class="table"
            stripe border
            ref="multipleTable"
            @selection-change="selsChange"
            :header-cell-style="{background:'#f3f3f3',textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"><!--:data="用于存放请求数据回来的数组" -->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="bill_date" label="单据日期" width="120" fixed>
            </el-table-column>
            <el-table-column prop="billno" label="单据编号" width="160" fixed>
            </el-table-column>
            <el-table-column prop="user" label="销售人员" width="120">
            </el-table-column>
            <el-table-column prop="client" label="客户" width="120">
            </el-table-column>
            <el-table-column prop="sale_amount" label="销售金额(元)" width="120">
            </el-table-column>
            <el-table-column prop="after_amount" label="优惠后金额(元)" width="120">
            </el-table-column>
            <el-table-column prop="amount" label="数量" width="100">
            </el-table-column>
            <el-table-column prop="return_money" label="已退款金额(元)" width="120">
            </el-table-column>
            <el-table-column prop="return_status" label="退款状态" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.return_status == 0" type="warning">未退款</el-tag>
                <el-tag v-if="scope.row.return_status == 1" type="info">部分退款</el-tag>
                <el-tag v-if="scope.row.return_status == 2" type="success">全部退款</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="maker" label="制单人" width="120">
            </el-table-column>
            <el-table-column prop="check_status" label="订单状态" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.check_status == 3" type="info">退回</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="note" label="备注" width="140">
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.row)">
                  <i class="el-icon-edit"></i>编辑
                </el-button>
                <el-button type="text" @click.native.prevent="deleteRow(scope.$index,tableData)">
                  <i class="el-icon-delete"></i>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页-页码 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </div>
      <sale-editable ref="SaleEditable" :rows="rows"></sale-editable>
   </el-card>

 </template>
<script>
import SaleEditable from '@/components/sale-manage/SaleEditable';
export default {
  components:{
    SaleEditable
  },
  data () {
    return {
      rows: '',//表格一行的数据
      sels: [], //选中的数据
      currentPage: 1, //当前页码
      pagesize: 5,    //每页的数据条数
      //tableData: [] //表格数据
      tableData: [
        {
          bill_date: '2021-02-15',
          billno: 'XS202103301149577',
          user: '张三',
          client: '小花',
          sale_amount: '100.00',
          after_amount: '100.00',
          amount: '1',
          return_money: '',
          return_status: 0,
          maker: '吉吉果园',
          check_status: 3,
          note: '疑问多多',

          contact: '小笑话',
          address: '河北省石家庄市桥东区Tommy',
          phone: '15552326587',
          premium_rate: '0',
          discount_amount: '0',
          client_bear: '0.00',
          collect: '0.00',
          settle_account: '0',
          arrears: '100.00',

          goods: '葡萄',
          unit: '箱',
          warehouse: '郑州',
          amount: '2',
          sale_price: '50',
          discount_rate: '0',
          discount: '0',
          produce_date: '2021-02-10',
          indate: '90',

        }
      ],
      form: {
        keywords: '',
        date: ''
      }
    }
  },

  methods: {
    // 查询
    search () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(this.form)
          this.$message.success('保存成功')
        } else {
          this.$message.error('表单验证失败!')
        }
      })
    },

    //编辑操作
    handleEdit(row) {
      // this.rows = row;
      this.rows = JSON.parse(JSON.stringify(row))
      this.$nextTick(()=>{
        this.$refs.SaleEditable.openEditable();
      });
    },

    //新增
    add() {
      this.$router.push({path:'/sale-manage/sale-order'})
    },

    //删除操作
    deleteRow(index, rows){
      this.$confirm('确认要删除该销售记录吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //选中数据
    selsChange(data) {
      this.sels = data;
    },

    //每页条数改变时触发事件,选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pagesize = val;
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
}
</script>
<style>

</style>
